<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>BOSS直聘-互联网招聘神器！</title>
    <!-- 通过link标签来引用css文件夹中的style.css样式文件 -->
    <link rel="stylesheet" href="css/main.css">
    <link rel="shortcut icon" type="image/x-icon" href="img/favicon.png">
</head>
<!-- 调整代码格式  alt+shift+f -->

<body>
    <div class="container" id="app">
          <!-- 头部 header -->
        <div class="home-header">
            <!-- 背景图上的文字 -->
            <img src="img/home-search-text.png" alt="">
            <!-- 表单 -->
            <form action="">
                <input type="text" placeholder="搜索职位/公司">
                <button type="submit">搜索</button>
            </form>
        </div>
    
        <!-- 分类信息 categories -->
        <div class="home-categories">
            <!-- 自定义列表 -->
            <dl v-for="item in categories">
                <dt>
                    <!-- 属性绑定 -->
                    <img :src="item.icon" alt="">
                    <!-- 模板展示 -->
                    <div>{{item.name}}</div>
                </dt>
                <dd>
                    <a href="" class="tag" v-for="tag in item.tags">{{tag}}</a>
                    <!-- <a href="" class="tag">Angular</a> -->
                </dd>
            </dl>
        </div>
        <!-- 页脚 footer-->
        <div class="home-footer">
            <p>违法和不良信息举报邮箱：jubao@kanzhun.com</p>
            <p>企业服务热线和举报投诉：400 065 5799</p>
        </div>  
    </div>
    

    <!-- <div id="app">
        {{ message }}
    </div>

    <div id="app-3">
        <p v-if="seen">现在你看到我了</p>
    </div> -->

    <script src="https://cdn.bootcss.com/vue/2.6.10/vue.js"></script>
    <!-- fetch库可以提高浏览器的兼容性，IE是不支持fetch这个函数的 -->
    <!-- <script src="https://cdn.bootcss.com/fetch/3.0.0/fetch.min.js"></script> -->
    <script>
        // 创建一个vue的实例
         var vm = new Vue({
            //指定vue的这个实例要绑定到哪个元素上面
            el: '#app',
            //表示数据
            data: {
                // message表示数据的名字
                // Hello Vue!表示名字所对应的值
                categories:  //    json需要双引号"" 
                []   
            },
            // 当页面被加载的时候会调用一个函数来获取json的数据
            created:function(){
                // 利用了ajax异步向服务器请求数据
                fetch('http://127.0.0.1:5500/api/index.json')
                .then(function(res){
                    // 可以利用res来请求json数据
                    return res.json();
                }).then(function(data){
                    // 第二个then才是真正得到的数据data
                    // 利用sonsole.log(data);测试在控制台输出数据
                    console.log(data);
                    // 将得到的数据复制给categories数组
                    vm.categories = data;
                })
            }
        })
    </script>
</body>

</html>
